<template>
  <div class="app-container home">
    <part-comp title="数据统计" />
    <div class="home_header">兼职数据大盘</div>
    <el-row :gutter="20">
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
            <div class="grid-content bg-purple1">
                <div class="num_title">今日完成数量</div>
                <div class="num_box flexrowbetween">
                    <div><span class="num_s">{{count.today}}</span>单</div>
                    <img src="@/assets/images/icon1.png" alt="" srcset="">
                </div>
            </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
            <div class="grid-content bg-purple2">
                <div class="num_title">提现金额</div>
                <div class="num_box flexrowbetween">
                    <div><span class="num_s">{{count.pay}}</span>元</div>
                    <img src="@/assets/images/icon2.png" alt="" srcset="">
                </div>
            </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
            <div class="grid-content bg-purple3">
                <div class="num_title">结算金额</div>
                <div class="num_box flexrowbetween">
                    <div><span class="num_s">{{count.coin}}</span>元</div>
                    <img src="@/assets/images/icon3.png" alt="" srcset="">
                </div>
            </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
            <div class="grid-content bg-purple4">
                <div class="flexcolumn aligncenter">
                    <img src="@/assets/images/avatar.png" alt="" class="avatar">
                    <span class="username overflowtext">{{name}}</span>
                </div>
            </div>
        </el-col>
    </el-row>
    <div class="home_header mt_30">业务排行榜</div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="formbox">
        <el-form-item label="" prop="uid">
            <el-select v-model="queryParams.uid" size="small" placeholder="请选择" clearable @change="handleQuery" style="width:160px">
                <el-option
                    v-for="dict in userlist"
                    :key="dict.id"
                    :label="dict.user_login"
                    :value="dict.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="" prop="time" label-width="80px">
            <el-select v-model="queryParams.time" size="small" placeholder="请选择" @change="handleQuery" style="width:160px">
                <el-option
                    v-for="dict in daylist"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                ></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <div class="tablebox whitebg">
        <el-table v-loading="listLoading"
            :data="list"
            class="whitetable"
            element-loading-text="Loading">
            <!-- <el-table-column label="资源编号" prop="id" width="130px"></el-table-column> -->
            <el-table-column label="排名" prop="id" width="80" >
                <template slot-scope="scope">
                    <span>{{(queryParams.page - 1) * queryParams.num + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户名" prop="user_login"></el-table-column>
            <el-table-column label="支付账号">
                <template slot-scope="scope">
                    <span>{{ scope.row.info?scope.row.info.account:'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="支付金额">
                <template slot-scope="scope">
                    <span>{{ scope.row.success?scope.row.success.coin:'0'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="完成单量">
                <template slot-scope="scope">
                    <span>{{ scope.row.success?scope.row.success.num:'0'}}单</span>
                </template>
            </el-table-column>
            <el-table-column prop="type_readname" label="总占比">
                <template slot-scope="scope">
                    <span v-if="scope.row.success">
                        <span v-if="scope.row.success.num==0">0%</span>
                        <span v-else>{{((scope.row.success.num/scope.row.count_num).toFixed(4)*100).toFixed(2)}}%</span>
                    </span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="操作"  fixed="right" width="100px" >
                <template slot-scope="scope">
                    <div class="flex btnflex">
                        <div class="commhover btn_textblue mr_15 mb_10" @click="showDetail(scope.row)">查看详情</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.num"
            @pagination="getList"
            />
    </div>
  </div>  
</template>

<script>
import {mapGetters} from 'vuex';
import { gethomeList,payCount } from '@/api/home'; 
import PartComp from '@/components/PartComp';
export default {
    components:{
        PartComp
    },
    data(){
        return {
            count:{

            },
            userlist:[],
            daylist:[{name:'今日',id:1},{name:'近七日',id:7},{name:'近30日',id:30}],
            queryParams:{
                page:1,
                num:10,
                uid:"",
                time:1,
            },
            listLoading:false,
            list:[],
            total:0
        }
    },
    computed: {
        ...mapGetters([
            'name'
        ]),
    },
    created(){
        // 用户列表
        this.getDicts('/check/user/user').then(res=>{
            this.userlist = res.data;
        });
        this.getCount();
        this.getList();
    },
    methods:{

        getCount(){
            payCount().then(res=>{
                if(res.code == 1){
                    this.count = res.data;
                }
            })
        },

        getList(){
            this.listLoading=true;
            let params = {
                page:this.queryParams.page,
                num:this.queryParams.num,
            }
            if(this.queryParams.uid){
                params.uid = this.queryParams.uid
            }
            if(this.queryParams.time){
                params.time = this.queryParams.time
            }
            gethomeList(params).then(res=>{
                this.listLoading=false;
                this.list = res.data.list;
                this.total = res.data.count;
            }).catch(()=>{
                this.listLoading=false;
            })
        },

        handleQuery(){
            this.queryParams.page = 1;
            this.getList();
        },

        showDetail(row){
            this.$router.push({name:"resourcehomehomedetail",query:{id:row.id}})
        }
    }
}
</script>

<style lang="scss" scoped>
.home_header{
    color: #000;
    font-size: 15px;
    font-weight: bold;
    margin: 15px 0;
}
.grid-content{
    padding: 22px;
    height: 120px;
    width: 100%;
    border-radius: 6px;
    
}
.bg-purple1{
    background: url('../../assets/images/bg1.png') center no-repeat;
    background-size: cover;
}
.bg-purple2{
    background: url('../../assets/images/bg2.png') center no-repeat;
    background-size: cover;
}
.bg-purple3{
    background: url('../../assets/images/bg3.png') center no-repeat;
    background-size: cover;
}
.bg-purple4{
    background: url('../../assets/images/bg4.png') center no-repeat;
    background-size: cover;
}
.num_title{
    margin-bottom: 15px;
}
.num_box{
    .num_s{
        font-size: 28px;
        margin-right: 3px;
    }
    img{
        width: 50px;
        height: 50px;
    }
}
.avatar{
    width: 62px;
    height: 62px;
    border-radius: 50%;
    margin-bottom: 6px;
}
.username{
    display: inline-block;
    max-width: 100%;
    font-size: 14px;
}
</style>